<style>
.store-detail{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-bottom: 50px;
	width: 750upx;
}
.topimg image{
	width: 100%;
	vertical-align: middle;
}
.detail-txt{
	display: flex;
	flex-direction: row;
	padding: 6upx 0;
	border-bottom: 1upx solid #e6e6e6;
}
.detail-txt .item{
	/* display: flex;
	flex: 1;
	flex-direction: column;
	align-items:center; */
	position: relative;
	width: 33.333%;
	text-align: center;
}
.detail-txt .item .border{
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -25upx;
	height: 50upx;
	width: 3upx;
	background: #e6e6e6;
}
.item .sub{
	padding: 0 18upx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.detail-content{
	display: flex;
	padding: 20px;
}
.detail-content .title{
	
}
.detail-content .con{
	display: flex;
    flex: 1;
	flex-direction: column;
}
.btn-box{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
.btn-box button{
	border-radius: 0;
	background: #0faeff;
}
.nomore{
	text-align: center;
}
.list-box{
	padding: 0 10px;
}
.uni-media-list{
	display: flex;
	align-items: center;
}
.uni-list-cell:after {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
}
.lease-btn{
	font-size: 28upx;
}
</style>
<template>
	<view class="store-detail">
		<div class="topimg">
			<image :src="store.logo" mode=""></image>
		</div>
		<div class="detail">
			<div class="detail-txt">
				<div class="item">
					<div class="border"></div>
					<div>店名</div>
					<div class="sub">{{store.name}}</div>
				</div>
				<div class="item" @click="call(store.tel)">
					<div class="border"></div>
					<div>联系电话</div>
					<div class="sub">{{store.tel}}</div>
				</div>
				<div class="item" @click="goMap(store.areaname ? store.areaname : ''+store.addr ? store.addr :'')">
					<div>
						<uni-icon type="location-filled" size="15" color="#999"></uni-icon>地址
					</div>
					<div class="sub">{{store.areaname ? store.areaname : ''}}{{store.addr ? store.addr :''}}</div>
				</div>
			</div>
			<div class="detail-content">
				<div class="title">店铺详情：</div>
				<div class="con">
					{{store.content}}
				</div>
			</div>
		</div>
		<div class="list-box">
			<!-- <div class="title">租赁物：</div> -->
			<view class="lease-list" v-if="list.length>0">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
						<view class="uni-media-list" >
							<image class="uni-media-list-logo" :src="item.pic"></image>
							<view class="uni-media-list-body">
								<!-- <view class="uni-media-list-text-top uni-ellipsis">{{item.addr}}</view>
								<view class="uni-media-list-text-bottom uni-ellipsis">{{item.content}}</view> -->
								<view class="uni-media-list-text-top">
								   {{item.rname}}
								   <text>({{item.status==0 ? '下架' : item.status==1 ? '可租':item.status==2 ?'在租' :''  }})</text>
								</view>
								<view class="uni-media-list-text-bottom twowrap">{{item.content}}</view>
								<!-- <view class="uni-media-list-text-bottom uni-ellipsis">{{item.bname}}</view>
								<view class="uni-media-list-text-bottom uni-ellipsis">{{item.addr}}</view> -->
								<view class="sell-num">
									<text class="fl">¥{{item.price}}元/小时 (需押金:{{item.deposit}}元)</text>
									<!-- <text class="fl"></text> -->
									<!-- <text class="fr">已租30</text> -->
								</view>
								<!-- <view class="sell-num">
									<text class="fl">(需押金:{{item.deposit}}元)</text>
								</view> -->
							</view>
							<view class="lease-btn-box">
								<text v-if="item.sh&&item.status==2">租用审核中</text>
								<button type="primary" v-if="item.status==1" class="lease-btn" @click="toPay(item)">我要租</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="list.length==0" class="nodata">
				<image src="../../../static/img/nodata.png" mode=""></image>
			</view>
			<div class="nomore" v-if="!hasMore&&list.length>0">没有更多了</div>
		</div>
		<!-- <div class="btn-box">
			<button type="primary">购买点金券</button>
		</div> -->
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
    import {
        mapState,
        mapMutations
    } from 'vuex'
	
	export default {
		components:{ uniIcon },
		data() {
			return {
				store:{
					img:'https://img.alicdn.com/bao/uploaded/i2/3432002736/O1CN01usm9IK1W587pmt2rj_!!0-item_pic.jpg_760x760Q50s50.jpg_.webp',
					name:'新日电动车专卖店',
					place:'石家庄棉六店',
					discount:'全场95折',
					detail:'新店开业全场95折,店长电话18881888168',
					coupon:'100',
					evaluate:[]
				},
				list:[],
				bid:'',
				pageNum:1,
				pageSize:20,
				hasMore:true
			};
		},
		computed:{
			...mapState(['userInfo'])
		},
		methods:{
			call(tel){
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			goMap(address){
				uni.navigateTo({
					url:'../storeMap/storeMap?address='+address
				})
			},
			toInfo(item){
			   uni.navigateTo({
				url:'../../leaseList/leaseInfo/leaseInfo?item='+JSON.stringify(item)
			   })
			},
			getList(){
				let that = this
				// let bid = this.store.bid
				let bid = this.bid
				uni.request({
					url: this.httpUrl + 'leaseResDetail/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						bid:bid,
						pageNum: that.pageNum,
						pageSize: that.pageSize,
// 						,
// 						status:1
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
							that.list.push(...res.data.data.data)
// 							that.list.forEach(item=>{
// 								switch (item.status){
// 									case 0:
// 									    item.status = '下架'
// 									case 1:
// 									    item.status = '可用'
// 									case 2:
// 									    item.status = '在租'		
// 										break;
// 									default:
// 										break;
// 								}
// 							}) 
							if(res.data.data.data.length < that.pageSize){
								that.hasMore = false
							}else{
								that.hasMore = true
								that.pageNum ++
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			getStoreList() {
				let that = this
				uni.request({
					url: this.httpUrl + 'business/list4Page',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						bid:that.bid,
						pageNum: 1,
						pageSize: 1
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 1) {
							that.store = res.data.data.data[0]
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								mask: true
							})
						}
					}
				})
			},
			toLeaseDetail(item){
// 				uni.navigateTo({
// 					url:'../../leaseList/leaseDetail/leaseDetail?item='+JSON.stringify(item)
// 				})
			},
			toPay(item){
			   // this.payShow = true
			   let that = this
			   let uid = this.userInfo.uid
			   let bid = item.bid
			   let did = item.did
			   console.log(this.userInfo);
			   if(!uid){
				   uni.navigateTo({
					url:'../../login/login'
				   })
			   }else{
				   uni.request({
						url: that.httpUrl + 'resLease/lease',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							uid: uid,
							did: did,
							bid:bid
						},
						success: (res) => {
							// console.log(res)
							if (res.data.code == 1) {
								item.status=2
								item.sh = 1
								uni.showToast({
									title: '申请成功，请等待审核',
									icon: 'none',
									mask: true
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									mask: true
								})
							}
						}
				   })
			   }
// 			   if(!this.userInfo.deposit){
// 				   uni.showToast({
// 					title: '请先缴纳押金',
// 					icon: 'none',
// 					mask: true
// 				   })
// 				   return
// 			   }
			   // return
			   
			}
		},
		onReachBottom(){
		  if(this.hasMore){
			  this.getList()
		  }
		},
		onLoad(item) {
			// this.store = JSON.parse(item.item)
			this.bid = item.bid
			console.log(this.bid);
			this.getStoreList()
			this.getList()
		}
	}
</script>
